<template>
	<div class="yunui-main-searchbox-c">
		<el-dropdown @command="handleCommand" size="mini">
			<input type="text" class="yunui-main-searchbox" @input="onSearchHandler" v-model="searchWord"/>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item :command="item" v-for="item in tempSearchItem" :key="item.id">{{item.name}}</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
		
		<i class="el-icon-search yunui-main-searchbox-icon"></i>
	</div>
</template>

<script>
	export default {
		name: 'MainSearchBox',
		props:["menu"],
		data() {
			return {
				searchItem: [],
				searchWord:"",
				tempSearchItem:[]
			}
		},methods: {
			onSearchHandler() {
				if(this.searchWord.length==0){
					return;
				}
				var that=this;
				var newArray=[];
				for(var i=0;i<this.searchItem.length;i++){
					if(this.searchItem[i].name.indexOf(that.searchWord)!=-1){
						newArray.push(this.searchItem[i]);
					}
				}
				this.tempSearchItem=[];
				this.$nextTick(function(){
					this.tempSearchItem=newArray;
				});
			},handleCommand(item){
				this.$emit("searchSelected",item)
			}
		},
		watch: {
			menu(newValue) {
				if(newValue!=undefined){
					var children=newValue.children;
					for(var i=0;i<children.length;i++){
						var ci=children[i];
						for(var j=0;j<ci.children.length;j++){
							var cj=ci.children[j];
							if(cj.children==null){
								continue;
							}
							for(var k=0;k<cj.children.length;k++){
								this.searchItem.push(cj.children[k]);
							}
						}
					}
				}
			}
		},
	}
</script>

<style>
	
</style>
